import { useState } from 'react'
import { getData2 } from '../Data'
import { useMount, useReactive } from 'ahooks'

import { Button } from 'antd'



import { FlexGrid } from "@grapecity/wijmo.react.grid"
import { Point } from '@grapecity/wijmo';


const WijmoE01 = () => {

    const InitData = useReactive({
        init: null
    })
    const [Data, setData] = useState()

    useMount(() => { setData(getData2(200)) })

    const init = (e) => InitData.init = e

    const ClickA01 = () => {
        InitData.init.scrollIntoView(100, -1);
    }
    const ClickA02 = () => {
        let rc = InitData.init.cells.getCellBoundingRect(100, 0, true)
        InitData.init.scrollPosition = new Point(InitData.init.scrollPosition.x, -rc.top)
    }


    if (Data) {
        return (
            <div className='Page'>
                <FlexGrid itemsSource={Data} initialized={init} />
                <Button onClick={ClickA01}>将行100滚动到视图中</Button>
                <Button onClick={ClickA02}>将顶部单元格设置为第100行</Button>
            </div>
        )
    }
};

export default WijmoE01;